<template>
	<view class="body">
		<xk-header title="有偿内容详情"></xk-header>
		<view class="util-bar">
			<scroll-view refresher-background="#F8F8F8" :refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="pullDownRefresh" scroll-y :style="'height:'+ scrollViewHeight+'px;'">
			<view class="estate-box">
				<u-row customStyle="margin-bottom:15px">
					<u-col span="12"><view class="danhao-text">事项编码：{{info.content_no}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">事项名称:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.matters_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">楼栋:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.building}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">收费单位:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.charging_unit}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">收费标准:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.charging_standard}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">服务简介:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.service_profile}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">备注:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.remark}}</view></u-col>
				</u-row>
			<!-- 	<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">状态:</view></u-col>
					<u-col span="7">
						<view v-if="info.paid_status==10" class="color-text-1">申请中</view>
						<view v-else-if="info.paid_status==20" class="color-text-2">待受理</view>
						<view v-else-if="info.paid_status==30" class="color-text-3">待收款</view>
						<view v-else-if="info.paid_status==40" class="color-text-4">已完成</view>
						<view v-else-if="info.paid_status==45" class="color-text-3">已失效</view>
						<view v-else-if="info.paid_status==50" class="color-text-4">取消</view>
						<view v-else class="color-text-4">未知</view>
					</u-col>
				</u-row -->
				<u-row customStyle="margin-bottom:15px;border-bottom:1px solid #ccc;padding:0px 0 15px 0;">
					<u-col span="5"><view class="grey-text">有偿服务内容清单:</view></u-col>
					<u-col span="7"><view @click="openWY(info.dets)" class="black-text" style="text-align: right;"><u-icon label="查看详细清单" labelColor="#0660FF" labelPos="left" name="arrow-right"></u-icon></view></u-col>
				</u-row>
				<!-- <u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">制定人编号:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.maker_user_id}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">制定人:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.maker_user}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">制定部门编号:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.maker_dept_id}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">制定部门:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.maker_dept_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">制定日期:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.maker_date}}</view></u-col>
				</u-row> -->
			</view>
		    </scroll-view>
		</view>
		<u-loading-page loading-mode="spinner" :loading="loadingText" loadingText="数据加载中" fontSize="16"></u-loading-page>
		<view class="common-bottom-view">
			<view class="common-btn" @click="back">返回</view>
		</view>
		<view class="common-zw"></view>
		<u-popup
		:show="showWY"
		:round="8"
		closeable
		@close="showWY=false"
		customStyle="height:60%"
		>
			<view class="wy-title">有偿服务内容清单</view>
			<scroll-view scroll-y="true" class="scroll-Y">
			<view class="wybox" v-for="(wyItem, wyIndex) of ycList" :key="wyIndex">
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">序号:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.serial_no}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">事项内容:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.matter_content}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">服务周期:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.service_period}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">备注:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.remark}}</view></u-col>
				</u-row>	
			</view>
			<view v-if="ycList.length===0" style="padding:15px;"><u-empty mode="data" icon="/static/empty_data_icon.png"></u-empty></view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollViewHeight:0,
				content_id:'',
				triggered:false,
				loadingText:false,
				info:[],
				showWY:false,
				ycList:[],
			}
		},
		onShow(){

		},
		onLoad(opts){
			if(opts.content_id){
				this.content_id=opts.content_id
				console.log('this.content',this.content)
				this.queryListInfo(true)
			}
		},
		mounted(){
			this.$util.getHeightWithTopEl(".util-bar").then(height => {
				this.scrollViewHeight = height-95;
			});
		},
		onUnload(){
			uni.$off('refreshPatrolTask')
		},
		methods: {
			openWY(dets){
				this.showWY=true;
				this.ycList=dets;
				console.log('this.ycList',this.ycList)
			},
            back(){
            	uni.navigateBack()
            },
			pullDownRefresh(){
				if(this.triggered){
					return;
				}
				this.triggered = true;
				this.queryListInfo(true)
			},
			stopRefresh(){
				setTimeout(()=>{
					this.triggered = false;
					console.log('stop')
				}, 500)
			},

			async queryListInfo(flag) {
				this.loadingText=true;
				this.$api.mySelf_psPaidContent_getPaidContent(this.content_id).then((res)=>{
					console.log(res)
					this.info=res.task;
					this.loadingText=false;
				});
				this.stopRefresh();
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
	background:#F8F8F8;
}
.estate-box{
	background:#FFFFFF;
	padding:10px 10px 10px 10px;
	margin:10px;
	border-radius:6px;
	font-size:28rpx;
}
.danhao-text{
	font-size:32rpx;
	font-weight:bold;
}
.grey-text{
	color:#999999;
}
.black-text{
	padding-left:5px;
}
.color-text-1{
	padding-left:5px;
	color:#59A0FF;
}
.color-text-2{
	padding-left:5px;
	color:#0660FF;
}
.color-text-3{
	padding-left:5px;
	color:#000000;
}
.color-text-4{
	padding-left:5px;
	color:#ff0000;
}
.wy-title{
	text-align: center;
	font-size:18px;
	padding:15px 0 15px 0;
	border-bottom:1px solid #f1f1f1;
	font-weight:bold;
	background-color:#f1f1f1;
	border-radius:8px 8px 0 0;
}
.wybox{
	padding:15px;
	margin:10px;
	background-color:#f8f8f8;
	font-size:28rpx;
	border-radius:8px;
}
.wy-left-text{
	color:#999999;
}
.wy-right-text{
	color:#000000;
	margin-left:5px;
}
.scroll-Y{
	max-height:60vh;
}
</style>
